<template>
  <view class="index-page">
    <u-navbar
      title="充值中心"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>

    <view class="tx-0">
      <view class="tx-1">
        <view class="tx-2">充值金额</view>
        <view class="tx-3">
          <view class="tx-4">￥</view>
          <input type="digit" v-model="state.number" />
        </view>
        <u-button
          :throttleTime="300"
          class="tx-7"
          shape="circle"
          :custom-style="state.customStyle"
          @click="submit"
        >
          确认充值
        </u-button>
      </view>
    </view>
	<view v-html="state.nodes" v-if="state.nodes" class="zhifu"></view>
  </view>
  <!-- <web-view v-if="state.html" class="webview" :src="state.html"></web-view> -->
</template>
<script lang="ts" setup>
import { rechargeBySandH5,createOrderBySandFast } from '@/api/modules/user'

import { reactive, onMounted } from 'vue'
const state = reactive({
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff',
	nodes: '',
  },
  number: '',
  html: ''
})

//充值
const submit = () => {
  if (!state.number) {
    uni.showToast({
      title: '请输入金额',
      icon: 'error'
    })
    return
  }
  createOrderBySandFast({ money: state.number}).then(
    (result) => {
	state.nodes = result
    }
  )
}
</script>
<style lang="less" scoped>
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
.tx-1 {
  width: 646upx;
  margin: 0 auto;
  margin-top: 20upx;

  .tx-2 {
    font-size: 38upx;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20rpx;
  }

  .tx-3 {
    width: 100%;
    border-bottom: 1upx solid #555;
    height: 110upx;

    .tx-4 {
      float: left;
      line-height: 118upx;
      font-size: 30upx;
      color: #ccc;
    }
  }

  .tx-5 {
    font-size: 24upx;
    color: #f6bf50;
    margin-top: 25upx;

    .tx-6 {
      color: #ccc;
      display: inline-block;
    }
  }

  .tx-7 {
    width: 646upx;
    height: 94upx;
    background: #444;
    border-radius: 47upx;
    text-align: center;
    color: #fcfcfc;
    font-size: 30upx;
    line-height: 94upx;
    margin-top: 50upx;
  }

  .tx-8 {
    font-size: 24upx;
    color: #ccc;
    margin-top: 25upx;
  }
}
.tx-3 input {
  height: 110upx;
  line-height: 110upx;
  font-size: 38upx;
  color: #fff;
  padding-left: 25upx;
  box-sizing: border-box;
}
.zhifu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
  > view {
    position: absolute;
    width: 576rpx;
    height: 310rpx;
    background: #232625;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
  .title {
    color: #fff;
    text-align: center;
    margin-top: 20rpx;
  }
  .list {
    overflow: hidden;
    margin-top: 50rpx;
    image {
      width: 60rpx;
      height: 60rpx;
      float: left;
      margin-left: 30rpx;
    }
    > view {
      float: left;
      color: #fff;
      margin-left: 20rpx;
      margin-top: 5rpx;
    }
    image:last-child {
      float: right;
      margin-right: 20rpx;
      width: 28rpx;
      height: 28rpx;
      margin-top: 15rpx;
    }
  }
  button {
    width: 90%;
    background: linear-gradient(#ffd279, #f6bf50);
    border: none;
    color: #fff;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 50rpx;
  }
}
</style>
